<template>
  <div class="demo">
    <div class="demo-title">自定义校验规则</div>
    <div class="demo-content">
      <Form
        ref="formRef"
        name="custom-validation"
        :model="formState"
        :rules="rules"
        v-bind="layout"
        @finish="handleFinish"
        @validate="handleValidate"
        @finish-failed="handleFinishFailed"
      >
        <Form.Item has-feedback label="Password" name="pass">
          <Input v-model:value="formState.pass" type="password" autocomplete="off" />
        </Form.Item>
        <Form.Item has-feedback label="Confirm" name="checkPass">
          <Input v-model:value="formState.checkPass" type="password" autocomplete="off" />
        </Form.Item>
        <Form.Item has-feedback label="Age" name="age">
          <InputNumber v-model:value="formState.age" />
        </Form.Item>
        <Form.Item :wrapper-col="{ span: 14, offset: 4 }">
          <Button type="primary" html-type="submit">Submit</Button>
          <Button style="margin-left: 10px" @click="resetForm">Reset</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import InputNumber from '@sscd/input-number';
  import Form from '@sscd/form';
  import type { FormInstance, Rule } from '@sscd/form';
  interface FormState {
    pass: string;
    checkPass: string;
    age: number | undefined;
  }
  const formState = reactive<FormState>({
    pass: '',
    checkPass: '',
    age: undefined,
  });
  const formRef = ref<FormInstance>();
  const checkAge = async (_rule: Rule, value: number) => {
    if (!value) {
      return Promise.reject('Please input the age');
    }
    if (!Number.isInteger(value)) {
      return Promise.reject('Please input digits');
    }
    if (value < 18) {
      return Promise.reject('Age must be greater than 18');
    }
    return Promise.resolve();
  };
  const validatePass = async (_rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('Please input the password');
    }
    if (formState.checkPass !== '') {
      formRef.value?.validateFields('checkPass');
    }
    return Promise.resolve();
  };
  const validatePass2 = async (_rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('Please input the password again');
    }
    if (value !== formState.pass) {
      return Promise.reject("Two inputs don't match!");
    }
    return Promise.resolve();
  };
  const rules: Record<string, Rule[]> = {
    pass: [{ required: true, validator: validatePass, trigger: 'change' }],
    checkPass: [{ validator: validatePass2, trigger: 'change' }],
    age: [{ validator: checkAge, trigger: 'change' }],
  };
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };
  const handleFinish = (values: FormState) => {
    console.log(values, formState);
  };
  const handleFinishFailed = (errors) => {
    console.log(errors);
  };
  const resetForm = () => {
    formRef.value?.resetFields();
  };
  const handleValidate = (...args) => {
    console.log(args);
  };
</script>
